<template>
  <!-- 平台来源 -->
  <div class="echarts" id="PlatformSourceChart"></div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from "echarts";
interface ChartProp {
  name: string;
  value: number;
  percentage: string;
}
const initChart = (data: any = {}): ECharts => {
  const charEle = document.getElementById("PlatformSourceChart") as HTMLElement;
  const charEch: ECharts = init(charEle);
  const option: EChartsOption = {
    grid: {
      top: "0%",
      left: "2%",
      right: "2%",
      bottom: "0%"
      // containLabel: true
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} :  {c}人"
    },
    legend: {
      show: true,
      top: "middle",
      left: "20px",
      icon: "circle",
      orient: "vertical",
      align: "auto",
      itemWidth: 10,
      textStyle: {
        color: "#fff"
      },
      itemGap: 20,
      formatter: function (name: string) {
        let text = "";
        data.data.forEach((val: ChartProp) => {
          if (val.name === name) {
            text = name + " --- " + val.percentage;
          }
        });
        return text;
      },
      data: data.data.map((val: ChartProp) => val.name)
    },
    series: [
      {
        type: "pie",
        radius: ["60%", "85%"],
        center: ["68%", "45%"],
        color: ["#0E7CE2", "#FF8352", "#E271DE", "#F8456B", "#00FFFF", "#4AEAB0"],
        itemStyle: {
          borderColor: "#031845",
          borderWidth: 10
        },
        data: data.data,
        labelLine: {
          show: false
        },
        label: {
          show: false
        }
      },
      {
        type: "pie",
        radius: ["20%", "28%"],
        center: ["68%", "45%"],
        color: ["#ffffff", "red"],
        startAngle: 105,
        data: [
          {
            value: 30,
            name: "",
            itemStyle: {
              color: "transparent"
            }
          },
          {
            value: 5,
            name: "",
            itemStyle: {
              color: "transparent"
            }
          },
          {
            value: 65,
            name: "ddd",
            itemStyle: {
              color: "#ffffff"
            }
          }
        ],
        silent: true,
        labelLine: {
          show: false
        },
        label: {
          show: false
        }
      },
      {
        type: "pie",
        radius: [0, "30%"],
        center: ["68%", "45%"],
        startAngle: 90,
        data: [
          {
            value: 25,
            name: "1",
            itemStyle: {
              color: "transparent",
              borderWidth: 4,
              borderColor: "#ffffff"
            }
          },

          {
            value: 75,
            name: "2",
            itemStyle: {
              color: "transparent"
            }
          }
        ],
        selectedOffset: 10,
        silent: true,
        labelLine: {
          show: false
        },
        label: {
          show: false
        }
      },
      {
        type: "pie",
        radius: ["96%", "97%"],
        center: ["68%", "45%"],
        color: ["#007afe", "transparent", "#007afe", "transparent", "#007afe", "transparent"],
        data: [
          {
            value: 17,
            name: "11"
          },
          {
            value: 17,
            name: "22"
          },
          {
            value: 17,
            name: "33"
          },
          {
            value: 17,
            name: "44"
          },
          {
            value: 17,
            name: "55"
          },
          {
            value: 17,
            name: "66"
          }
        ],
        silent: true,
        labelLine: {
          show: false
        },
        label: {
          show: false
        }
      },
      {
        type: "pie",
        zlevel: 0,
        silent: true,
        radius: ["45%", "46%"],
        center: ["68%", "45%"],
        z: 10,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: new Array(150).fill("").map((val: string, index: number) => {
          if (index % 3 === 0) {
            return {
              name: (index + 1).toString(),
              value: 10,
              itemStyle: {
                color: "#fff",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            };
          } else {
            return {
              name: (index + 1).toString(),
              value: 25,
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            };
          }
        })
      },
      {
        type: "pie",
        zlevel: 0,
        silent: true,
        radius: ["58%", "60%"],
        center: ["68%", "45%"],
        z: 10,
        startAngle: 90,
        label: {
          show: false
        },
        color: ["red", "blue", "red", "blue"],

        labelLine: {
          show: false
        },

        data: [
          {
            name: "r1",
            value: 25,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(51,149,191,0.5)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(51,149,191,0)" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          {
            name: "r2",
            value: 25,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(51,149,191,0.5)" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          {
            name: "r3",
            value: 25,
            itemStyle: {
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(51,149,191,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(51,149,191,0.5)" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          {
            name: "r4",
            value: 25,
            itemStyle: {
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(51,149,191,0.5)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,0,0,0)" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
    ]
  };
  charEch.setOption(option, true);
  return charEch;
};
defineExpose({
  initChart
});
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
